<template>
  <div class="ringdiv" style="width: 180px;height: 180px;">
    <div :id="'container' + ringid" style="height: 100%"></div>
  </div>
</template>
<script>
import echarts from "echarts";
import reslist from "../../json/position.js";
import chartmixins from "../../chartmixins.js";

export default {
  props: [],
  mixins: [chartmixins],
  components: {},
  data() {
    return {
      ringid: "dfdsfsdfsdfs"
    };
  },
  computed: {},
  watch: {},
  mounted() {
    var dom = document.getElementById("container" + this.ringid);
    var myChart = echarts.init(dom, "dark");
    var app = {};
    let option = null;
    option = {
      backgroundColor: "#5555",
      color: [],
      title: {
        text: "环境监控模块"
      },
      angleAxis: {
        show: false,
        axisTick: {
          //y轴刻度线
          show: false
        },
        axisLabel: {
          // show: true,
          color: "#fff",
        },
        splitLine: {
          //网格线
          show: false
        },
        min: 0,
        max: 100,
        interval: 10,
      },
      tooltip: {
        trigger: "item",
        formatter: "{b}: {c}%"
      },
      radiusAxis: {
        type: "category",
        data: ["温度", "湿度", "水浸", '烟雾'],
        z: 100,
        axisTick: {
          //y轴刻度线
          show: false
        },
        axisLabel: {
          // show: false,
          color: "#fff",
        },
        splitLine: {
          //网格线
          show: false
        },
        show: false
      },
      polar: {
        center: ['50%', '60%'],
        radius:['30%', '70%'],  
      },
      series: [
        {
          // radius: ["50%", "50%"],
          type: "bar",
          // barHeight: '5%',
          data: [_.random(80, 100), _.random(80, 100), _.random(80, 100), _.random(80, 100)],
          coordinateSystem: "polar",
          name: "A",
          stack: "a",
          itemStyle: {
            itemWidth: '10px',
            normal: {
              // 定制显示（按顺序）
              color: function(params) {
                var colorList = ["#FA9801", "#F9D902", "#12D3FB", '#FA980155'];
                return colorList[params.dataIndex];
              }
            }
          }
        }
      ]
      // legend: {
      //   show: true,
      //   data: ["A", "B", "C"]
      // }
    };

    myChart.setOption(option, true);

    this.myChart = myChart;

    window.addEventListener("resize", () => {
      this.myChart.resize();
    });
  },
  methods: {}
};
</script>
<style lang='scss' scoped>
</style>